$(function () {
    // 1.首页数据渲染
    // 1.1ajax去后台获取用户数据
    // 1.2使用模板引擎渲染数据

    var currentPage = 1;//记录当前页
    var pageSize = 5;//每页条数
    // 使用函数封装
    function render() {
        $.ajax({
            type: 'get',
            url: '/user/queryUser',
            data: {
                page: currentPage,
                pageSize: pageSize
            },
            dataType: 'json',
            success: function (res) {
                console.log(res);
                // 渲染
                $('tbody').html(template('tmp', res));
                // res.total 数据库真实数据总数 
                // 调用分页器
                setPage(res.total);
            }
        })
    }
    render();
    // 2.禁用启用功能
    var id = null;
    var isDelete = null;
    $('tbody').on('click','.btn-exec',function () {
        //  获取当前数据id
        id = $(this).parent().data('id');
        // 获取当前数据要进行操作 （禁用/启用）
        isDelete = $(this).hasClass('btn-danger')?0:1
        // console.log( $(this).hasClass('btn-danger') );
        console.log( id,isDelete );
    })
    // 点击模态框中确定按钮后进行切换操作，并重新渲染页面
    $('.btn-ok').click(function () {
        $.ajax({
            type: 'post',
            url: '/user/updateUser',
            data: {
                id:id,
                isDelete:isDelete
            },
            dataType: 'json',
            success: function (res) {
                // console.log(res);
                render();
                $('.modal-user').modal('hide')
            }
        })
    })

    // 4- 分页功能 
    // total 数据库数据的总数 
    function setPage(total) {
        $("#paginator").bootstrapPaginator({
            bootstrapMajorVersion:3,//默认是2，如果是bootstrap3版本，这个参数必填
            currentPage:currentPage,//当前页
            totalPages:Math.ceil(total/pageSize),//总页数
            onPageClicked:function(event, originalEvent, type,page){
            //为按钮绑定点击事件 page:当前点击的按钮值
                console.log( page );
                currentPage = page;
                // 页面进行重新渲染
                render();
            }
        })
    }
})
    
